<!--
- Author:   .
- Date:    2017/7/4 0004.
- File:    my.
-->
<template>
  <div>
    <app-down></app-down>
    <div class="Web_Box">
      <!--<div class="my_tis">-->
      <!--<a href=""><i class="iconfont icon-tishi"></i><span>您的个人资料还未完善，请完善个人资料</span><i class="iconfont icon-rightdot2"></i></a>-->
      <!--</div>-->
      <div class="MyHead xd">
        <div class="con pt50 pl25">
          <span v-show="ifNewMemberNotice" style="position: absolute; top: 10px; right: 15px; background: red; width: 7px; height: 7px; display: block; border-radius: 50%;"></span>
          <span><i class="iconfont icon-message-copy" @click="gotoMemberNoticeList"></i><span style="position: absolute; color: #fff; top: 1.7rem;right: 0.9rem;" @click="gotoMemberNoticeList">消息</span></span>
          <!--<div class="Photo fl"  @click="gotoMemberDetail"><img :src="memberInfo.member_avatar" alt=""/></div>-->
          <div class="fl pl25">
            <h1 class="slh" style="padding: 0"><span  @click="gotoMemberDetail">{{memberInfo.member_name}}</span>
              <!--<router-link :to="{name: 'wallet-bind'}" class="Bindaccount" v-show="walletInfo.state == '0' && memberInfo.member_id == '5336'">绑定花链账号</router-link>-->
              <!--<router-link :to="{name: 'wallet-transfer'}" class="Bindaccount" v-show="walletInfo.state == '1' && memberInfo.member_id == '5336'">兑换花链积分</router-link>-->
            </h1>
            <p class="numbers" style="padding: 0">{{memberInfo.member_mobile}}</p>
            <p class="numbers" style="margin-top: 0; padding: 0">我的邀请码：{{memberInfo.member_id}}  <span @click="copy" v-show="false && $deviceType == 'APICloud'">复制</span></p>
          </div>
        </div>
      </div>
      <div class="balance" v-show="memberInfo.is_brush_man == '1'">
        <ul class="f-cb">
          <li class="bor-r-ddd" style="width: 100%" @click="gotoAccountIndex"><p>积分</p>
            <span class="cr_45a73a">{{memberInfo.freeze_balance || 0}}</span></li>
          <!--<li class="bor-r-ddd" @click="gotoAccountIndex"><p>经验值</p>-->
            <!--<span class="cr_45a73a ">{{memberInfo.balance}}</span></li>-->
          <!--&lt;!&ndash;<li  @click="gotoAccountIndex"  style="margin-bottom: 10px;"><p>红积分</p><span class="cr_45a73a">{{memberInfo.h_balance || '0.00'}}</span></li>&ndash;&gt;-->
          <!--<li  @click="gotoAccountIndex"><p>股权积分</p><span class="cr_45a73a">{{memberInfo.stock || '0.00'}}</span></li>-->
        </ul>
      </div>
      <div class="OrderStatusEntry bor_b_dcdddd mt18 bg_fff" v-show="memberInfo.is_brush_man == '0'">
        <ul>
          <li @click="gotoOrderListByType(1)" style="width: 33%"><i class="iconfont icon-paid"></i>
            <span class="num" style="right: auto" v-show="countList.requested && countList.data.unpay_order != 0">{{countList.data.unpay_order}}</span>
            <p>待付款</p>
          </li>
          <li @click="gotoOrderListByType(2)" style="width: 33%"><i class="iconfont icon-shipped"></i>
            <span class="num" style="right: auto" v-show="countList.requested && countList.data.payed_order != 0">{{countList.data.payed_order}}</span>
            <p>待发货</p>
          </li>
          <li @click="gotoOrderListByType(3)" style="width: 33%"><i class="iconfont icon-goodsreceived"></i>
            <span class="num" style="right: auto" v-show="countList.requested && countList.data.ship_order != 0">{{countList.data.ship_order}}</span>
            <p>待收货</p>
          </li>
          <!--<li @click="gotoOrderListByType(4)" style="width: 25%"><i class="iconfont icon-evaluated"></i>-->
          <!--<span class="num" v-show="countList.requested && countList.data.eval_order != 0">{{countList.data.eval_order}}</span>-->
          <!--<p>待评价</p>-->
          <!--</li>-->
          <!--<li @click="gotoRefundList"><i class="iconfont icon-refund"></i>-->
          <!--<p>退款/换货</p>-->
          <!--</li>-->
        </ul>
      </div>
      <div class="nav_list mb45">
        <ul>
          <li>
            <router-link :to="{name: 'order-list'}" class="disb hidden">
              <i class="lefticon iconfont icon-allorders"></i>
              <span class="f28">全部订单</span> <i class="iconfont icon-rightdot"></i>
            </router-link>
          </li>
          <li class="mt18" v-show="memberInfo.is_brush_man == '1'">
            <router-link :to="{name: 'account-index'}">
              <a style="width: 100%" class="disb hidden"><i class="lefticon iconfont icon-daifukuan"></i>
                <span class="f28">我的资产</span><i class="iconfont icon-rightdot"></i>
              </a>
            </router-link>
          </li>
          <li class="mt18" >
            <router-link :to="{name: 'log-balanceLog'}">
              <a style="width: 100%" class="disb hidden"><i class="lefticon iconfont icon-wallet"></i>
                <span class="f28">我的收益</span><i class="iconfont icon-rightdot"></i>
              </a>
            </router-link>
          </li>
          <!--<li v-show="memberInfo.is_brush_man == '1'">-->
            <!--<router-link :to="{name: 'account-report'}">-->
              <!--<a style="width: 100%" class="disb hidden"><i class="lefticon iconfont icon-daifukuan"></i>-->
                <!--<span class="f28">账户变动查询</span><i class="iconfont icon-rightdot"></i>-->
              <!--</a>-->
            <!--</router-link>-->
          <!--</li>-->
          <li v-show="memberInfo.is_brush_man == '1'">
            <router-link :to="{name: 'member-friend'}">
              <a style="width: 100%" class="disb hidden"><i class="lefticon iconfont icon-distributionmanagement"></i>
                <span class="f28">我的好友</span><i class="iconfont icon-rightdot"></i> </a>
            </router-link>
          </li>
          <!--<li>-->
            <!--<router-link class="disb hidden" :to="{name: 'collect-list'}">-->
              <!--<i class="lefticon iconfont icon-since"></i>-->
              <!--<span class="f28">我的收藏</span><i class="iconfont icon-rightdot"></i>-->
            <!--</router-link>-->
          <!--</li>-->
          <li>
            <router-link class="disb hidden" :to="{name: 'address-list'}">
              <i class="lefticon iconfont icon-receivingaddress"></i>
              <span class="f28">我的收货地址</span><i class="iconfont icon-rightdot"></i>
            </router-link>
          </li>
          <li v-show="memberInfo.is_brush_man == '1'">
            <router-link class="disb hidden" :to="{name: 'bankcard-list'}">
              <i class="lefticon iconfont icon-bankcard"></i>
              <span class="f28">我的银行卡</span><i class="iconfont icon-rightdot"></i>
            </router-link>
          </li>
          <!--<li v-show="memberInfo.is_brush_man == '1'">-->
            <!--<a @click="gotoFwh">-->
              <!--<div class="disb hidden"><i class="lefticon iconfont icon-erweima "></i>-->
                <!--<span class="f28">淘花1服务号</span><i class="iconfont icon-rightdot"></i>-->
              <!--</div>-->
            <!--</a>-->
          <!--</li>-->
          <!--<li v-show="memberInfo.is_brush_man == '1'">-->
          <!--<router-link :to="{name: 'member-spread'}">-->
          <!--<div class="disb hidden"><i class="lefticon iconfont icon-invitepartners"></i>-->
          <!--<span class="f28">我的二维码</span><i class="iconfont icon-rightdot"></i>-->
          <!--</div>-->
          <!--</router-link>-->
          <!--</li>-->
          <!--<li>-->
            <!--<router-link class="disb hidden" :to="{name: 'setting-download'}">-->
              <!--<i class="lefticon iconfont icon-share"></i>-->
              <!--<span class="f28">分享下载淘花1App</span><i class="iconfont icon-rightdot"></i>-->
            <!--</router-link>-->
          <!--</li>-->
          <li>
            <a @click="gotoWithdraw">
              <div class="disb hidden"><i class="lefticon iconfont icon-pitch2 "></i>
                <span class="f28">提现</span><i class="iconfont icon-rightdot"></i>
              </div>
            </a>
          </li>
          <li>
            <a @click="gotoWithdrawLog">
              <div class="disb hidden"><i class="lefticon iconfont icon-rmb "></i>
                <span class="f28">提现日志</span><i class="iconfont icon-rightdot"></i>
              </div>
            </a>
          </li>
          <li>
            <a @click="gotoSettingSpread">
              <div class="disb hidden"><i class="lefticon iconfont icon-erweima "></i>
                <span class="f28">推广二维码</span><i class="iconfont icon-rightdot"></i>
              </div>
            </a>
          </li>
          <li>
            <a class="disb hidden" href="javascript: void(0)" style="font-size: 14px;">
              <i class="lefticon iconfont icon-tel"></i>
              <span class="f28">客服</span><a class="cr-54b331" style="color: #54b331; margin-left: 5px; display: inline-block" href="tel:05985253750">05985253750</a>
            </a>
          </li>
          <!--<li v-show="memberInfo.is_brush_man == '1'">-->
            <!--<a class="disb hidden" @click="gotoDownHelp">-->
              <!--<i class="lefticon iconfont icon-help"></i>-->
              <!--<span class="f28">操作流程</span><i class="iconfont icon-rightdot"></i>-->
            <!--</a>-->
          <!--</li>-->
          <li>
            <router-link class="disb hidden" :to="{name: 'setting-about'}">
              <i class="lefticon iconfont icon-mingxi"></i>
              <span class="f28">关于</span><i class="iconfont icon-rightdot"></i>
            </router-link>
          </li>
          <li>
            <router-link class="disb hidden" :to="{name: 'setting-index'}">
              <i class="lefticon iconfont icon-setup"></i>
              <span class="f28">设置</span><i class="iconfont icon-rightdot"></i>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        memberNoticeList: {requested: false, allLoaded: false, data: [], page: '1', pageSize: '10'},
        countList: {requested: false, data: {}}
      }
    },
    components: {},
    created() {
      this.$request.getAdvList()
      this.getCountList()
    },
    computed: {
      ifNewMemberNotice: function () {
        let ifNew = false
        for (let i = 0; i < this.memberNoticeList.data.length; i++) {
          if (this.memberNoticeList.data[i].is_read == '0') {
            ifNew = true
            break
          }
        }
        return ifNew
      }
    },
    methods: {
      gotoSettingSpread() {
        this.$router.push({name: 'setting-spread'})
      },
      gotoSpread() {
        this.$router.push({name: 'setting-about'})
      },
      gotoWithdraw() {
        this.$router.push({name: 'account-withdraw'})
      },
      gotoWithdrawLog() {
        this.$router.push({name: 'log-withdrawLog'})
      },
      getMemberNoticeList() {
        this.memberNoticeList.loading = true
        this.$request.getMemberNoticeList(this.memberNoticeList.page, this.memberNoticeList.pageSize).then(data => {
          if (data.length < this.memberNoticeList.pageSize) {
            this.memberNoticeList.allLoaded = true
          }
          this.memberNoticeList.data = [...this.memberNoticeList.data, ...data]
        }).finally(() => {
          this.memberNoticeList.loading = false
          this.memberNoticeList.requested = true
        })
      },
      gotoDownHelp() {
        this.$router.push({name: 'news-detail', params: {id: '11'}}) // 后台11是操作流程说明的文章的id
//        this.$router.push({name: 'iframe', query: {title: '操作流程', url: 'http://v.baihuae.com/weixin/plat/app/Html/41/418648/Detail_29.php?single_id=8305&C_id=41&fromuser=oLPnuwF5cSTdjxRqxz3ff3jiVn6M&wxref=mp.weixin.qq.com'}})
      },
      copy() { // 需要添加pasteboard或clipBoard模块才能调用系统剪切板
      },
      gotoMemberDetail() {
        this.$router.push({name: 'setting-index'})
      },
      gotoGzh() {
        if (this.$deviceType != 'APICloud') {
          this.$router.push({name: 'setting-gzh'})
        } else {
          this.$router.push({name: 'setting-gzh-help'})
        }
      },
      gotoFwh() {
        this.$router.push({name: 'setting-fwh'})
      },
      gotoAccountIndex() {
        this.$router.push({name: 'account-index'})
      },
      gotoMemberNoticeList() {
        this.$router.push({name: 'member-notice-list'})
      },
      gotoOrderListByType(type) {
        this.$router.push({name: 'order-list', query: {type: type}})
      },
      gotoRefundList() {
        this.$router.push({name: 'refund-list', query: {type: this.$dictionary.refundType.money}})
      },
      getCountList() {
        this.$request.getCountList().then(data => {
          this.countList.data = data
        }).finally(() => {
          this.countList.requested = true
        })
      }
    }
  }
</script>

<style>

</style>
